import React from 'react';
import ReactDOM from 'react-dom';
import RecentChangesTable from './RecentChangesTable';
import ComponentLifeCycle from './ComponentLifeCycle';
import BookStore from './BookStore';
import InputExample from './InputExample';
import ModalAlertTimeout from './ModalAlertTimeout';

import AddTodo from './AddTodo';
import TodoList from './TodoList';
import Footer from './Footer';


var data = [{ "when": "2 minutes ago",
					"who": "Jill Dupre",
					"description": "Created new account"
					},
					{
					"when": "1 hour ago",
					"who": "Lose White",
					"description": "Added fist chapter"
					},
					{
					"when": "2 hours ago",
					"who": "Jordan Whash",
					"description": "Created new account"
					}];
var headings = ['a','b','c']

class App extends React.Component {

	constructor(props){
		super(props);
		
	}
	render(){
		//return (<RecentChangesTable headings={headings} resource={'/api/book'} />)
		return (<div>
        <AddTodo
          onAddClick={text =>
            console.log('add todo', text)
          } />
        <TodoList
          todos={[{
            text: 'Use Redux',
            completed: true
          }, {
            text: 'Learn to connect it to React',
            completed: false
          }]}
          onTodoClick={todo =>
            console.log('todo clicked', todo)
          } />
        <Footer
          filter='SHOW_ALL'
          onFilterChange={filter =>
            console.log('filter change', filter)
          } />
      </div> )
		// loop create ui view(tr list)
		/**
		var rows = this.props.data.map(function(row,index){
			return (<tr key={index}>
				<td>{row.who}</td>
				<td>{row.when}</td>
				<td>{row.description}</td>
			</tr>);
		});
		var headers= this.props.headers.map(function(row,index){
			return <th key={index} >{row}</th>
		});

		return (<div className="panel panel-default">
			<div class="page-header">
			  <h1>{this.props.title}<small>subtext</small></h1>
			</div>
			
			<div className="panel-body">
				<table className="table table-bordered table-hover">
					<thead>
						<tr>
							 {headers}
						</tr>
					</thead>
					<tbody>
						{rows}   
					</tbody>
				</table>
			</div>
		</div>)*/
	}

	alertTimeout(){
		ReactDOM.render(<ModalAlertTimeout />, document.getElementById('modalAlertTimeout'));
		//this.setState({currentStep: 1, formValues: {}, cartTimeout: 1});

	}
	
}
/**
App.propTypes = {
    headings: React.PropTypes.array,
    changeSets: React.PropTypes.array
};
// ES6 initialize props
App.defaultProps = {
	      headings: ['who','when','description'],
	      changeSets:data
	    } */
export default App